從很早開始就一直有說到事件，那麼今天就會開始來講解所謂的事件是什麼!
JS其實是一種以事件作為驅動的語言，也就是說雖然瀏覽器一開始會讀取所有的JS程式碼，但有些會有所謂的「事件」來控制，例如:當某按鈕被點擊、輸入框被輸入的時候、按下或放開按鍵的時候等等都會等到事件被觸發才會執行裡面的程式碼。
好比今天去買麥當勞，給了你號碼，你並不會在他還沒叫到你的號碼的時候就去取餐。
而是他叫了你的號碼(事件觸發)=>你再去取餐(被觸發的程式碼)
我們先來看看如果有兩塊div
<html>
<body>
<div class="out" style="width:80px;height:50px;background-color:red;">
<div class="in"style="width:50px;height:40px;background-color:blue;">
</div>
</div>
</body>
</html>
如果點擊了藍色區塊，是不是也代表了我們也有點到紅色區塊呢?又或者是說其實我們點到了整個網頁!?
然而事件的流程就是在說明，我們 點擊網頁的元素接收事件的順序
那麼又可以分成兩種機制
今天就來介紹這兩款到底差別在哪!
其實就很像是由下往上，由啟動事件的那一個元素開始逐漸往上傳遞，一直到最後的根節點(document)
<html>
<body>
<div class="out">
CK
</div>
</body>
</html>
以上頭的例子來看觸發的順序就是
<div>CK</div>
<body>
<html>
document
剛好跟冒泡相反，如果看剛剛的例子的話他就會是
document
<html>
<body>
<div>CK</div>
那你可能會問，所以JS到底是以哪一個為主?其實兩個都會執行，也就是說觸發事件的時候會先執行捕獲一直到被點擊的元素節點，在一路向上傳遞最後回到document
好了，今天就講解到這邊，明天就來講解是用哪個API來控制事件的吧!
iThome鐵人賽
看影片追技術